<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>爬虫表格</title>
		<link rel="stylesheet" href="/css/layui.css" media="all"/>
		<link rel="stylesheet" type="text/css" href="/css/modules/laydate/default/laydate.css"/>
		
		<style type="text/css">
			body{
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="layui-form" lay-filter="flightForm">
			</br>&nbsp;出发地：
			<select name="startCitySelect" id="startCity" lay-filter="startFlightOptions">
				<option value="长沙">长沙</option>
				<option value="广州">广州</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="深圳">深圳</option>
<!--				<option value="山东(TAO)">山东</option>-->
			</select>
			</br>&nbsp;到达地：
			<select name="endCitySelect" id="endCity" lay-filter="endFlightOptions">
				<option value="长沙">长沙</option>
				<option value="广州">广州</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="深圳">深圳</option>
			</select>
			
			</br>&nbsp;日期选择：
			<div class="layui-form-item">
			<input type="text" placeholder="请输入开始日期" name="startDate" id="start" lay-filter="start"/>			
			-
			<input type="text" placeholder="请输入结束日期" name="endDate" id="end" lay-filter="end"/>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn">搜索</button>
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="refreshBtn">刷新</button>
				</div>
			</div>			
		</div>
		
		</br><h3>&nbsp;航班数据：</h3>
		<table class="layui-hide" id="flightInfo">
		</table>
		
		<script src="/js/layui.js"></script>
		<script>
			layui.use(['table','form','laydate'], function(){
				var myTable = layui.table;
				var form = layui.form;
				var $ = layui.$;
				var laydate = layui.laydate;
				
								
	            //日期时间有效范围的设定:
	            laydate.render({
	                elem: '#start' // 绑定元素的id
	                ,type: 'date' // 设置格式：日期时间
//	                ,min: '2019-7-28 12:30:00' // 设置日期时间的最小值
//	                ,max: now// 设置日期时间的最大值
	                ,theme: '#393D49' // 自定义主题颜色
	                ,calendar: true // 显示公历节假日
	            });
	            laydate.render({
	                elem: '#end' // 绑定元素的id
	                ,type: 'date' // 设置格式：日期时间
	                ,theme: '#393D49' // 自定义主题颜色
	                ,calendar: true // 显示公历节假日
	              });
	              
	           	form.on('submit(searchBtn)', function(data){
	           		console.log(data.field);
		        	// 出发城市
					var flightSelect = document.getElementById("startCity");
					var index = flightSelect.selectedIndex;
					var startCityValue = flightSelect.options[index].value;
					//console.log(startCityValue);
					// 到达城市
					var flightSelect2 = document.getElementById("endCity");
					var index2 = flightSelect2.selectedIndex;
					var endCityValue = flightSelect2.options[index2].value;
					//console.log(endCityValue);
					
		        	$.ajax({
		        		type:"get",
		        		url:"/server",
		        		//async:true,
		        		data:{
							sDate: data.field.startDate,
							eDate: data.field.endDate,
							dCity: startCityValue,
							aCity: endCityValue
		        		},
		        		success: function(data){
		        			if(data.code == 200){
		        				alert(data);
		        			};
		        		},
		        	});
	        	});
	        	
	        	form.on('submit(refreshBtn)', function(data){	        
					//console.log(data);
					myTable.render({
						elem:'#flightInfo',
						height:600,
						url:'/getResult',
						title:'航班信息',
						page:true,
						totalRow:true,
						cols:[
							[
								{field:'flightWay', title:'航班', width:180},
								{field:'startDate', title:'出发时间', width:200},
								{field:'endDate', title:'到达时间', width:200},
								{field:'startCity', title:'出发地', width:200},
								{field:'endCity', title:'到达地', width:200}
							]
						],
						done:function (res){
							console.log(JSON.stringify(res.data))
						}

					});
	        	});


			});
			
	        
	        
		</script>
		
		<!--<script src="layui/js/laydate.js"></script>
		<script>
			laydate.render({
				elem:'#startDate'
			});
			laydate.render({
				elem:'#endDate'
			});
		</script>-->
		
		<!--<script type="text/javascript" src="layui/js/jquery-2.1.1.min.js">
			function findFlight(){
				// 出发城市
				var flightSelect = document.getElementById("startCity");
				var index = flightSelect.selectedIndex;
				var startCityValue = flightSelect.options[index].value;
				console.log(startCityValue);
				// 到达城市
				var flightSelect2 = document.getElementById("endCity");
				var index2 = flightSelect2.selectedIndex;
				var endCityValue = flightSelect2.options[index2].value;
				console.log(endCityValue);
				// 出发日期
				var startDateValue = $'#startDate'.val();
				var startDateValue = document.getElementById("startDate");
				console.log(startDateValue);
				// 到达日期
				var endDateValue = document.getElementById("endDate");
				console.log(endDateValue);
			}
		</script>-->
		
	</body>
</html>
